<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"  th:href="@{/static/layui/css/layui.css}"  media="all">
</head>
<body>
<h2>新建流程绑定</h2>
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">流程名称</label>
        <div class="layui-input-block">
            <input type="text" name="processName" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公司名称</label>
        <div class="layui-input-inline">
            <select name="companyId" id="test1" lay-filter="test1">
            </select>
        </div>
        <label class="layui-form-label">系统名称</label>
        <div class="layui-input-inline">
            <select name="systemId" id="test2" lay-filter="test2">
            </select>
        </div>
        <label class="layui-form-label">业务名称</label>
        <div class="layui-input-inline">
            <select name="businessId" id="test3" lay-filter="test3">
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">绑定流程</label>
        <div class="layui-input-inline">
            <select name="procdefKey" lay-verify="required" lay-search="" id="test4" lay-filter="test4">
            </select>
        </div>
        <label class="layui-form-label">绑定版本</label>
        <div class="layui-input-inline">
            <select name="processVersion"  id="test5" lay-filter="test5">
            </select>
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">流程状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="激活" checked>
            <input type="radio" name="status" value="1" title="停用">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script th:src="@{/static/bootstrap/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    var form;
    layui.use(['form', 'layedit', 'laydate'], function() { //独立版的layer无需执行这一句
        var layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate; //独立版的layer无需执行这一句
        form = layui.form;
        initSelect();
        function initSelect(){
            $.ajax({
                url:"/activiti-data-dictionary/getDataById/1376724654013591554",
                type:"GET",
                dataType: "json",
                success:function(res){
                    console.log(res);
                    $("#test1").append("<option value=\"\">请选公司</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#test1").append("<option value=\"" + res.data[i].id +  "\">" + res.data[i].dictionaryName + "</option>");
                    }
                }
            });
            $.ajax({
                url:"/activiti-data-dictionary/getDataById/1376726683469524993",
                type:"GET",
                dataType: "json",
                success:function(res){
                    $("#test2").append("<option value=\"\">请选系统</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#test2").append("<option value=\"" + res.data[i].id +  "\">" + res.data[i].dictionaryName + "</option>");
                    }
                }
            });
            $.ajax({
                url:"/activiti-data-dictionary/getDataById/1376726773064052738",
                type:"GET",
                dataType: "json",
                success:function(res){
                    $("#test3").append("<option value=\"\">请选业务</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#test3").append("<option value=\"" + res.data[i].id +  "\">" + res.data[i].dictionaryName + "</option>");
                    }
                }
            });
            $.ajax({
                url:"/models/deploymentAllList",
                type:"GET",
                dataType: "json",
                success:function(res){
                    $("#test4").append("<option value=\"\">直接选择或搜索选择</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#test4").append("<option value=\"" + res.data[i].pKey +  "\">" + res.data[i].pName + "</option>");
                    }
                }
            });
        }

        form.on('select(test4)', function(data){
            $.ajax({
                url:"/models/getVersionByKey",
                type:"GET",
                data:{"key": data.value},
                dataType: "json",
                success:function(res){
                    console.log(res);
                    $("#test5").append("<option value=\"\">请先绑定流程</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#test5").append("<option value=\"" + res.data[i] +  "\">" + res.data[i] + "</option>");
                    }
                }
            });
            setTimeout(function () {
                form.render('select');
            },300)
        });


        //监听提交
        form.on('submit(demo1)', function(data){
                console.log(data);
                var json = data.field;
                var temp = JSON.stringify(json);
                $.ajax({
                    url:"/activiti-manager/addActivitiManager",
                    type:"POST",
                    data:temp,
                    contentType:"application/json",
                    dataType: "json",
                    success:function(res){
                        alert(res.message);
                    }
                });
                return false;
        });
    });
    setTimeout(function () {
        form.render('select');
    },300)
</script>

</html>